<template>
  <div class="container">
    <div class="common">
      <div class="relative">
        <img :src="pageImgArr.pic01" alt="">
        <span id="share" @click="shareForWechat">分享</span>
      </div>
    </div>
    <div class="battle">
      <img :src="pageImgArr.pic02" alt="">
      <div class="wrapper">
        <div class="list" v-for="(item,index) in battleList" :key="index" @click="tampleAction(item,index)">
          <img class="maojin" src="../../../assets/img/streetDance/streetDance14.jpg" alt="">
          <img :src="item.img640_url" alt="">
          <img class="yinzhang" v-if="selected==index" src="../../../assets/img/streetDance/streetDance15.png" alt="">
        </div>
      </div>
    </div>
    <div class="module-container"  v-for="(itemList,index) in pageGoodsIdArr" :key="index">
      <GoodsItem :parentData="subItem" :moduleIdx="index" @childEvent="goForGoodsDetail" v-for="(subItem,idx) in itemList.slice(0,1)" :key="idx"/>
      <div class="wrapper" v-if="pageGoodsIdArr.length>0">
        <div class="scroll-box">
          <div class="scroll-wrapper" :style="{'width':5*2+'rem'}">
            <GoodsItemFive :parentData="subItem" @childEvent="goForGoodsDetail" v-for="(subItem,index) in itemList.slice(1)" :key="index"/>
          </div>
        </div>
      </div>
    </div>
    <div class="more">
      <div class="more-title"><img :src="pageImgArr.pic04" alt=""></div>
      <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,index) in moreData.specialArrList" :key="index"/>
    </div>
    <!-- toast提示 -->
    <transition name="fade">
      <Toast :data="modalData" v-if="showModal" v-on:closeModal="showModal=false;" />
    </transition>
  </div>
</template>

<script>
  import GoodsItem from './item.vue'
  import Toast from "./toast";
  import{ getCookie, setCookie } from '../../../utils/self.js'
  import GoodsItemFive from 'components/GoodsItems/item05.vue'
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi, isGetCouponApi, getCouponList } from "@/apis/publicApi.js";
  export default {
    components:{ GoodsItem, GoodsItemFive, SpecialItem, Toast},
    data(){
      return{
        modalData:{modalType:-1,couponVal:0},
        showModal:false,
        pageImgArr:{},
        goodsStyle:{width:'3.27rem',padding:'0.1rem',marginRight:'0.15rem'},
        battleList:[],//6个互动商品
        selected:-1,//选择的印章商品
        selectedItemId:'',//已经选中的商品Id
        isGetCouponed:false,//是否领取券
        tampleLock:false,//领券锁防止重复点击
        pageGoodsIds:[
          1590355,1590349,1590353,1590357,1590359,1590351,
          1591381,1591341,1591365,1591367,1591363,1591315,1591317,1591383,1591385,1591339,1591335,
          1597025,1591343,1591313,1591323,1591379,1591681,1591683,1591685,1591391,1591345,1591559,
          1590361,1591287,1591393,1591371,1591387,1591389,1591373,1591375,1591377,1591337,1591285,
          1597023,1591311,1591321,1591355,1597163,1591359,1591361,1591325,1591319,1591327,1591329
        ],
        pageGoodsIdArr:[],
        moreData:{
          reqestIds:'70657,70661,70663,70665,70683,70685,70687,70689,70737,70775,70735,70913,70677,70727,70297,70531,70307,70805,70701,70799,70791,70745,70833,70741,70807,70779,70795',
          specialArrList:[]
        }
      }
    },
    created(){
      let that = this;
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.initPageImg();
      this.$navtiveUtils.checkLogin();
      window.isLogin = function(u) {
        if (u) {
          let userInfo = { user_id: u };
          window.userInfo = userInfo;
          that.initLocalData();//登录时载入值
          that.shareCouponStatus();
        } else {
          that.$navtiveUtils.onLogin();
        }
      };
      this.getGoodsAction();
    },
    mounted(){
      this.moreSpecial();
    },
    methods:{
      initPageImg(){
        this.pageImgArr={
          pic01:require('../../../assets/img/streetDance/streetDance01.jpg'),
          pic02:require('../../../assets/img/streetDance/streetDance02.jpg'),
          pic03:require('../../../assets/img/streetDance/streetDance03.jpg'),
          pic04:require('../../../assets/img/streetDance/streetDance04.jpg'),
          pic05:require('../../../assets/img/streetDance/streetDance05.jpg')
        };
      },
      tampleAction(item,index){
        if(this.isGetCouponed || this.tampleLock){
          this.goForGoodsDetail(item.goods_id);
        }else{
          if(!this.tampleLock){
            this.selected=index;
            this.tampleLock=true;//开启防止重复请求锁
            this.shareCouponAction(item.goods_id);
          }
        }
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(){
        let param = this.pageGoodsIds.toString();
        getGoodsListApi(param).then(res =>{
          let limitTop = 4,perPageNum=11,abandon=6;
          this.battleList=res.data.slice(0,6);//截取前6个
          this.checkStampleState(this.battleList);//显示印章所在
          for (let index = 0; index < limitTop; index++) {
            let element = res.data.slice(index*perPageNum+abandon,(index+1)*perPageNum+abandon);
            this.pageGoodsIdArr.push(element);
          }
        });
      },
      moreSpecial() {
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareCouponStatus(){
        let that = this,userId = window.userInfo.user_id;
        isGetCouponApi(userId, 11).then(({ data }) => {
          if (data.member && data.member.length > 0) {
            data.member.forEach((item, index) => {
              that.isGetCouponed = item.coupon_id == "1607" && item.coupon_status ;
            });
          }
        });
      },
      shareCouponAction(goods_id){
        let that=this;
        if(window.userInfo && window.userInfo.user_id){
          let userId = window.userInfo.user_id;
          getCouponList(userId,'1607',11).then(res =>{
            if (res.code == 200 && res.status == "success") {
              that.isGetCouponed=true;//领取券成功
              that.tampleLock=false;//领券成功重置按钮点击状态
              that.modalData.modalType='fileName01';
              that.modalData.couponVal='10';
              that.setLocalStorage({userId:userId,goodsId:goods_id});
              this.showModal=true;
            }else{
              that.$vux.toast.text(`${res.message}`, "middle")
            }
          })
        }else{
          that.tampleLock=false;//未登录重置按钮点击状态
          this.$navtiveUtils.checkLogin();
        }
      },
      checkStampleState(array){
        array.forEach((item,index) =>{
          if(item.goods_id==this.selectedItemId){
            this.selected=index;//显示选中项
            this.tampleLock=true;//激活请求锁
          }
        });
      },
      initLocalData(){
        var tempUserId = this.getLocalInfo(window.userInfo.user_id);
				if( tempUserId && tempUserId.userId == window.userInfo.user_id ){
          console.log('AAAAAAAAAAA')
          this.selectedItemId = tempUserId.goodsId;
        }else{
          console.log('BBBBBBBBBBBB')
          this.selected = -1;//不选中任何项
          this.selectedItemId = '';//不显示任何印章
        }
        this.checkStampleState(this.battleList);//显示印章
      },
      //获取localStorage值
      getLocalInfo(userInfo){
				let streetDanceInfo=localStorage.streetDanceInfo;
        if(!streetDanceInfo){ streetDanceInfo=[];}
        else{ streetDanceInfo=JSON.parse(streetDanceInfo) };
        var tempData= streetDanceInfo.find(function(item,index){return item.userId==userInfo });
        return tempData;//tempData的值可能undefined 或者 {userId: 761, goodsId: "1581221"}
			},
      //设置localStorage
      setLocalStorage(obj){
        let streetDanceInfo=localStorage.streetDanceInfo;
        if(!streetDanceInfo){ streetDanceInfo=[]; }
        else{streetDanceInfo=JSON.parse(streetDanceInfo); };
        streetDanceInfo.push(obj);
        localStorage.streetDanceInfo=JSON.stringify(streetDanceInfo);
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").includes(e);
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>
<style lang="less">
html,body{
  width: 100%;
  background-image: url('../../../assets/img/streetDance/streetDance05.jpg');
  background-repeat: repeat-y;
  background-size: contain;
}
</style>

<style lang="less" scoped>
.relative{
  position: relative;
  #share{
    width: 1rem;
    height: 0.45rem;
    line-height: 0.45rem;
    text-align: center;
    font-size: 0.3rem;
    color: #ffffff;
    position: absolute;
    top: 0.2rem;right: 0;
    background: #f77c09;
    border-radius: 0.45rem 0 0 0.45rem;
  }
}
.battle{
  
  .wrapper{
    width: 6.62rem;
    display: flex;
    flex-wrap: wrap;
    padding: 0.15rem 0.2rem 0.06rem;
    background: #000;
    margin: 0 auto;
    .list{
      width: 3.25rem;
      height: 3.25rem;
      margin-right: 0.12rem;
      margin-bottom: 0.12rem;
      overflow: hidden;
      position: relative;
      &:nth-child(2n){margin-right: 0}
      .maojin{
        position: absolute;
        top: 0;left: 0;
      }
      .yinzhang{
        width: 1.6rem;height: 1.6rem;
        position: absolute;
        bottom: -0.35rem;right: -0.3rem;
        animation: yinzhang 0.5s linear;
      }
      @keyframes yinzhang {
        0%{
          right:-6rem;
          bottom: 1rem;
        }
        75%{
          right:-0.3rem;
          bottom: -0.55rem;
        }
        80%{
          right:-0.3rem;
          bottom: -0.35rem;
        }
        85%{
          right:-0.3rem;
          bottom: -0.15rem;
        }
        90%{
          right:-0.3rem;
          bottom: -0.35rem;
        }
        95%{
          right:-0.3rem;
          bottom: -0.55rem;  
        }
        100%{
          right:-0.3rem;
          bottom: -0.35rem;
        }
      }
      // .camtample{
      //   width: 1.6rem;height: 1.6rem;
      //   position: absolute;
      //   bottom: 0.15rem;right: -0.5rem;
      // }
    }
  }
}
.module-container{
  .wrapper{
    margin: 0 0.24rem;
    padding-top: 0.15rem;
    background: #000;
  }
  .line-two{
    margin: 0 0.13rem 0;
    padding-top: 0.13rem;
    display: flex;
    flex-wrap: wrap;
  }
  .scroll-box{
    width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .scroll-box::-webkit-scrollbar{width: 0;height: 0}
  .scroll-wrapper{
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.2rem;
    .goods:nth-child(5n){
      margin-right: 0;
    }
  }
}

.goods-container{
  display: flex;
  flex-wrap: wrap;
  font-family: '微软雅黑';
  padding: 0.1rem 0.1rem 0rem;
  font-size: 0.3rem;
}
.more {
  .special {position: relative;}
  .info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 0.6rem;
    padding: 0 0.3rem;
    line-height: 0.6rem;
    color: #333;
    font-size: 0.28rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    .title {
      width: 55%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .date {
      width: 30%;
      height: 100%;
      text-align: right;
    }
  }
}

</style>